<template>
  <div>
    <h4 class="rad-txt" style="margin-top:-50px">
      <span class="abtxt1">订单</span>
      <span class="abtext">详情</span>
    </h4>
    <div class="container">
      <div class="row thumbnail center col-sm-12">
        <div class="col-sm-12 ">
          <table>
            <tr>
              <th>订单编号：</th>
              <td>{{ orderInfo.orderNum }}</td>
            </tr>
            <tr>
              <th>订单时间：</th>
              <td>
                {{
                  orderInfo.createTime
                    .toLocaleString()
                    .replace(/T/g, " ")
                    .replace(/\.[\d]{3}Z/, "")
                }}
              </td>
            </tr>
            <tr>
              <th>订单状态：</th>
              <td v-if="orderInfo.orderState == 0">未付款</td>
              <td v-if="orderInfo.orderState == 1">已付款</td>
              <td v-if="orderInfo.orderState == 2">已取消</td>
              <td v-if="orderInfo.orderState == 3">已完成</td>
              <td v-if="orderInfo.orderState == 4">退款申请中</td>
              <td v-if="orderInfo.orderState == 5">退款中</td>
              <td v-if="orderInfo.orderState == 6">退款成功</td>
              <td v-if="orderInfo.orderState == 8">退款申请被驳回</td>
            </tr>
            <tr>
              <th>收货姓名：</th>
              <td>{{ orderInfo.receiverName }}</td>
            </tr>
            <tr>
              <th>收货地址：</th>
              <td>{{ orderInfo.addressInfo }}</td>
            </tr>
            <tr>
              <th>收货电话：</th>
              <td>{{ orderInfo.receiverPhone }}</td>
            </tr>
          </table>
        </div>
        <div ref="table">
          <el-table
            :data="page.list"
            border
            style="width: 800px;margin-left: 115px;margin-top: 20px;"
            :stripe="true"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              prop="bookImage"
              label="封面"
              width="199"
              align="center"
            >
              <template slot-scope="{ row }">
                <img
                  v-if="row.bookImage"
                  :src="row.bookImage"
                  class="avatar"
                  style="height: 70px;width: 100px;"
                  @click="showSingleInfo(row)"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </template>
            </el-table-column>
            <el-table-column prop="bookName" label="书名" width="300">
            </el-table-column>
            <el-table-column prop="bookPrice" label="单价/元" width="100">
            </el-table-column>
            <el-table-column prop="bookCont" label="购买数量" width="200">
            </el-table-column>
          </el-table>
        </div>
        <el-row style="margin-left: 105px;">
          <el-col :span="5">
            <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageNumChange"
              :current-page="page.current"
              :page-sizes="[1, 5, 10]"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </el-col>
        </el-row>
        <div class="col-sm-12 ">
          <table>
            <tr>
              <th></th>
              <th></th>
              <th>商品总数：</th>
              <td>{{count}}</td>
              <th>订单总价：</th>
              <td>
                <span class="text-danger">{{ orderInfo.orderPrice }}元</span>
              </td>
              <th v-if="orderInfo.orderState == 1">售后：</th>
              <td v-if="orderInfo.orderState == 1"><el-button @click="showRefund(orderInfo.orderNum)" size="mini">申请退款</el-button></td>
            </tr>
          </table>
        </div>
      </div>
      <div></div>
      <div
        v-if="orderInfo.orderState == 0"
        class="col-sm-offset-7 col-sm-5"
        style="padding: 30px;"
      >
        <div class="col-sm-6  btn btn-success btn-block" @click="payment()">
          点击支付
        </div>
      </div>
      <el-dialog :visible.sync="showRefundWindow" width="30%">
      <template slot="title">
        <div style="font-size:18px;font-weight: 999;">申请退款</div>
      </template>
      <div style="width: 400px;">
        <el-form ref="refundForm" :model="refundForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="退款原因" prop="refundReason">
            <el-input type="textarea" v-model="refundForm.refundReason"></el-input>
          </el-form-item>
          <el-button type="primary" @click="submitForm('refundForm')">立即申请</el-button>
        </el-form>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "showSingleOrder",
  data() {
    return {
      orderInfo: {},
      orderId: "",
      page:{},
      count:"XXX",
      showRefundWindow:false,
      refundForm:{
        refundReason:''
      },
      rules:{
        refundReason: [
          {
            required: true,
            message: "请输入退款原因",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    payment() {
      this.$http
        .post("orderInfo/user/pagePay", {
          orderId: this.orderId,
          returnUrl: "http://localhost:8080/#/showOrderList"
        })
        .then(resp => {
          document.write(resp.data.data);
        });
    },
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listOrderItems() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.$http
        .get("/orderItem/user/selectOrderItem", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            orderId:this.orderId
          }
        })
        .then(resp => {
          //将分页信息传入data区中
          console.log(resp.data.data)
          this.page=resp.data.data.pageInfo
          this.count=resp.data.data.count
        });
    },
    showSingleInfo(obj) {
      sessionStorage.setItem("singleBookId", obj.bookId);
      this.$router.push("/showSingleBookInfo");
    },
    showRefund(orderId){
      this.refundForm.orderId=orderId;
      this.showRefundWindow=true;
    },
    submitForm(refundForm) {
      this.$refs[refundForm].validate(valid => {
        if (valid) {
          //申请退款
          this.$http.post("/orderRefund/user/applyRefund",this.refundForm).then(resp=>{
            alert(resp.data.message)
            this.showRefundWindow=false;
            this.refundForm.orderId='';
            this.refundForm.refundReason='';
            this.findSingleOrder();
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    findSingleOrder(){
      this.$http.get("/orderInfo/user/findSingleOrder?orderNum="+this.orderId).then(resp=>{
        this.orderInfo=resp.data.data;
      })
    }
  },
  created() {
    this.orderInfo = JSON.parse(sessionStorage.getItem("singleOrder"));
    this.orderId=sessionStorage.getItem("singleOrderId")
    this.findSingleOrder();
    this.listOrderItems();
  },
  mounted() {}
};
</script>

<style scoped>
@import "../../../assets/login/css/style.css";
@import "../../../assets/bootstrap-3.3.4/dist/css/bootstrap.min.css";
@import "../../../assets/Flat-UI-master/dist/css/flat-ui.min.css";

.row {
  margin-left: 20px;
  margin-right: 20px;
}
.line-center {
  line-height: 50px;
  text-align: center;
}
.row input {
  width: 50px;
}
.list-group-item:hover {
  background: #27ae60;
}
.list-group-item div:first-child:hover {
  cursor: pointer;
}
th {
  text-align: right;
  width: 170px;
}
td {
  text-align: left;
  padding: 10px;
}
.table th {
  text-align: center;
}
.table td {
  text-align: center;
}

.all {
  display: flex;
  margin-left: 150px;
}

.sidebar {
  width: 30%;
  background-color: #f0f0f0;
}

.main {
  flex: 1;
}
</style>
